<template>
  <div class="fd-components" @click="itemClick">
    <s-icon :type="icon" />
    <span>{{ name }}</span>
  </div>
</template>
<script>
import { v4 } from 'uuid'
export default {
  // 继承
  name: 'ComponentDefinition',
  props: {
    onAdd: {
      required: false,
      type: Function,
      default: () => {}
    },
    icon: {
      required: true,
      type: String
    },
    name: {
      required: true,
      type: String
    },
    templateData: {
      required: true,
      type: Object
    }
  },
  methods: {
    itemClick(e) {
      const data = JSON.parse(JSON.stringify(this.templateData))
      data.id = v4()
      this.onAdd(data)
    }
  }
}
</script>
<style scoped>
.fd-components {
  border: 1px solid #f0f0f0;
  border-radius: 2px;
  float: left;
  padding: 5px 10px;
  font-size: 10px;
  cursor: pointer;
  width: 90px;
  margin: 3px;
  display: flex;
}
.fd-components:hover {
  border: 1px solid #13c2c2;
  color: #13c2c2;
}
.fd-components span {
  display: block;
  float: right;
}
.fd-components .anticon {
  font-size: 18px;
}
</style>
